{% extends "admin/base.html" %}

{% block extrastyle %}
<style type="text/css">
	@import "/media/js/simp/dojo/resources/dojo.css";
	@import "/media/js/simp/dijit/themes/tundra/tundra.css";
	/*@import "/media/js/simp/dojox/grid/_grid/tundraGrid.css";*/
	@import "/media/js/simp/simp/simpTundra.css";
</style>
{% endblock extrastyle %}

{% block extrahead %}
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<meta http-equiv="PRAGMA" content="NO-CACHE" /> 
{% googleanalytics %}
<script type="text/javascript">
var djConfig = {
	parseOnLoad: true,
	isDebug: true, 
	debugAtAllCosts: false,
	usePlainJson: true,
};
</script>
<script type="text/javascript" src="/media/js/simp/dojo/dojo.js"></script>

<script type="text/javascript">
	dojo.require("dojo.parser");
	dojo.require("dijit.form.Button");
</script>
{% endblock extrahead %}

{% block bodyclass %}tundra{% endblock %}

{% block content %}
<div id="simpDemoImageSelectArea" style="width: 1000px; margin: auto;">
	<h1>django-simp demo</h1>
	<p>
		this is the demonstration of django-simp the django based simple image manipulation programm<br />	
		select your favorite image and click edit to start django-simp<br />
		to view edited images just click <a href="/simpdemo/gallery/">hier</a> to go to the gallery 
	</p>
	{% for demoImage in demoImages %}
	<div class="demoImageSelector" style="width: 100%; height: 220px;">
		<div class="demoImageThumbnailContainer" style="height: 200px; width: 200px; margin-top: auto; margin-left: 20px; margin-right: 20px; float: left;">
			<div clas="demoImageThumbnail" style="margin-top: auto; margin-left: auto;">
				<img src="{{demoImage.get_image_thumb}}" alt="thumb"/>
			</div>
		</div>
		<h2>{{demoImage.title}}</h2>
		<p>{{demoImage.desc}}</p>
		<div dojoType="dijit.form.Button">
			<b>edit</b> 
			<script type="dojo/method" event="onClick">
				console.debug("button on click")
				var request = {
					url: "/simpdemo/initsimp/",
					content : {
						id: {{demoImage.id}},
						preset: -1,
						module: null,
					},
					load: function(data){
						retVal = dojo.fromJson(data);
						if (retVal.callback != null) {
							window.location = retVal.callback;
						}
					},
					error: function(data){
						console.debug("An error occurred: ", data);
					},
					timeout: 2000,
				};
				dojo.xhrPost(request);
			</script>
		</div>
		<div dojoType="dijit.form.Button">
			<b>show gallery of this image</b>
			<script type="dojo/method" event="onClick">
				window.location = "/simpdemo/gallery/{{demoImage.id}}/1/"
			</script>
		</div>
	</div>
	{% endfor %}
	<p><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/"><img alt="Creative Commons License" style="border-width:0" src="http://creativecommons.org/images/public/somerights20.png"/></a><br/>All <span xmlns:dc="http://purl.org/dc/elements/1.1/" href="http://purl.org/dc/dcmitype/StillImage" rel="dc:type">images</span> are licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License</a>.<br />
</div>
{% endblock content %}
